<template>
	<!-- 导航 -->
	<!-- <block v-if="isFixed">
		<CustomNavbar :iconFlag="iconFlag" :navTitle="navTitle" :isFixed="isFixed" />
	</block> -->

	<view class="content-box">
		<up-tabs :list="tabsList" :current="tabsActiveIndex" lineWidth="30" lineColor="#f56c6c" is-scroll :activeStyle="{
		            color: '#303133',
		            fontWeight: 'bold',
		            transform: 'scale(1.05)'
		        }" :inactiveStyle="{
		            color: '#606266',
		            transform: 'scale(1)'
		        }" itemStyle="padding-left: 34rpx; padding-right: 34rpx; height: 68rpx;"
			@change="change">
		</up-tabs>
		<view class="tabs-content-box">
			<!-- 趣事圈 -->
			<FunCircle v-if="tabsId == 1" :tabsId="tabsId" />
			<!-- 短视频 -->
			<ShortVideo v-if="tabsId == 2" :tabsId="tabsId" />
			<!-- 新闻趣事 -->
			<NewsFun v-if="tabsId == 3" :tabsId="tabsId" />
			<!-- 文旅推荐 -->
			<CulturalTourism v-if="tabsId == 4" :tabsId="tabsId" />
			<!-- 搞笑 -->
			<Funny v-if="tabsId == 5" :tabsId="tabsId" />
			<!-- 汽车榜 -->
			<Car v-if="tabsId == 6" :tabsId="tabsId" />
			<!-- 关注 -->
			<FollowWithInterest v-if="tabsId == 7" :tabsId="tabsId" />
		</view>
	</view>
</template>

<script setup lang="ts">
	import CustomNavbar from '../components/customNavbar.vue';
	import FunCircle from './funCircle/index.vue';
	import ShortVideo from './shortVideo/index.vue';
	import NewsFun from './newsFun/index.vue';
	import CulturalTourism from './culturalTourism/index.vue';
	import Funny from './funny/index.vue';
	import Car from './car/index.vue';
	import FollowWithInterest from './followWithInterest/index.vue';

	import { ref, reactive, onMounted } from 'vue';

	// 引入组件
	components: {
		CustomNavbar;
		FunCircle;
		ShortVideo;
		NewsFun;
		CulturalTourism;
		Funny;
		Car;
		FollowWithInterest
	};

	// 自定义导航是否通栏显示
	const isFixed = ref(true)
	// 导航标题
	const navTitle = ref('灵感记')
	// 返回图标是否展示
	const iconFlag = ref(false)

	// tabs对应的内容状态
	const tabsActiveIndex = ref(0)
	const tabsId = ref(1)

	const tabsList = reactive([
		{ name: '趣事圈', typeId: 1 },
		{ name: '短视频', typeId: 2 },
		{ name: '新闻趣事', typeId: 3 },
		{ name: '文旅推荐', typeId: 4 },
		{ name: '搞笑', typeId: 5 },
		{ name: '汽车榜', typeId: 6 },
		{ name: '关注', typeId: 7 },
	]);
	
	onMounted(() => {})

	// tabs触发事件
	const change = (e : any) => {
		tabsActiveIndex.value = e.index
		tabsId.value = e.typeId
	};

</script>

<style lang="scss" scoped>
	.content-box {
		height: 100%;

		.tabs-content-box {
			width: 100%;
			height: 100%;
			padding-top: 100rpx;
			background-color: #f5f5f5;
			border-bottom: 1rpx solid #fff;
		}
	}

	::v-deep .u-tabs {
		position: fixed;
		// top: 0;
		// left: 0;
		height: 88rpx;
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #fff;
		z-index: 9999999;
	}
</style>